<template>
    <div class="center">
        <div style="display: flex;align-items: center;justify-content: space-between;">
            <img src="../assets/loginLogo.png" alt="" class="logos" />
            <div>
                <div class="my">
                    <img src="../assets/1.jpg" alt="" class="img">
                    <div class="phone">173****5783</div>
                    <img src="../assets/xia.png" alt="" class="xia">
                </div>
                <div class="tui">
                    <img src="../assets/tui.png" alt="" class="img">
                    <div class="text">退出</div>
                </div>
            </div>
        </div>

        <div class="jie">
            
        </div>
    </div>
</template>
<script setup>

</script>
<style scoped lang="scss">
.center {
    width: 100vw;
    height: 100vh;
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: linear-gradient(283deg, #FDEDEA 0%, #DBE9FF 100%);

    .logos {
        width: 144px;
        height: 48px;
        margin: 26px;
    }

    .my {
        margin: 26px;
        display: flex;
        align-items: center;


        .img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }

        .phone {
            font-size: 14px;
            color: #333333;
            margin: 0 10px;
        }

        .xia {
            width: 12px;
            height: 12px;
        }
    }

    .tui {
        margin: 26px;
        width: 137px;
        height: 48px;
        background-color: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
        border-radius: 10px 10px 10px 10px;
        display: flex;
        align-items: center;
        justify-content: start;


        .img {
            width: 14px;
            height: 14px;
            margin-left: 15px;
            margin-right: 10px;
        }

        .text {
            font-size: 14px;
            color: #666666;
        }
    }
}
</style>